<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
            <el-breadcrumb-item :to="{ path: '/' }">
                <i class="el-icon-s-promotion"></i> 后台管理
            </el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>

        <el-divider></el-divider>
        <div>
          <el-form :inline="true" :model="selectForm" style="float: left" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="selectForm.username" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="部门">
              <el-input v-model="selectForm.department" placeholder="部门"></el-input>
            </el-form-item>
            <el-form-item label="岗位">
              <el-input v-model="selectForm.post" placeholder="岗位"></el-input>
            </el-form-item>
            <el-form-item label="员工类型">
              <el-input v-model="selectForm.employeeType" placeholder="员工类型"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSelectClick(1,pageSize)">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="danger" @click="onResetSelect">重置</el-button>
            </el-form-item>
            <!--跳到员工新增页面-->
          </el-form>
          <el-button @click="regNewUser()" style="float: right">
            <i class="el-icon-circle-plus"></i>
            <span>员工新增</span>
          </el-button>
        </div>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-table :data="scope.row.children" border style="width: 100%">
                  <el-table-column prop="id" label="ID" width="100" align="center"></el-table-column>
                  <el-table-column prop="roleName" label="角色名" header-align="center" ></el-table-column>
                  <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                      <el-tooltip class="item" effect="dark" content="删除" placement="top">
                        <el-button type="danger" icon="el-icon-delete" circle size="mini"
                                   @click="openDeleteRoleConfirm(scope.row)"></el-button>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column prop="id" label="ID" width="60" align="center"></el-table-column>
            <el-table-column prop="username" label="姓名" width="100" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="nickname" label="昵称" width="100" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="phone" label="手机号" width="150" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="department" label="部门" width="150" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="post" label="岗位" width="150" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="employeeType" label="员工类型" width="200" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="employmentDate" label="入职日期" width="200" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="profile" label="个人简介" width="200" header-align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="created" label="创建时间" width="100" header-align="center" ></el-table-column>
            <el-table-column prop="updated" label="修改时间" width="100" align="center"></el-table-column>
            <el-table-column label="操作" width="170" align="center" fixed="right">
                <template slot-scope="scope">

                  <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                    <el-button type="primary" icon="el-icon-edit" circle size="mini"
                               @click="showEditFormDialog(scope.row)"></el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="重置密码" placement="top">
                  <el-button type="warning" icon="el-icon-refresh-right" circle size="mini"
                             @click="onReset(scope.row)"></el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="添加角色" placement="top">
                    <el-button type="warning" icon="el-icon-plus" circle size="mini"
                               @click="addAuthFormDialog(scope.row)"></el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除" placement="top">
                    <el-button type="danger" icon="el-icon-delete" circle size="mini"
                               @click="openDeleteConfirm(scope.row)"></el-button>
                  </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>

        <el-dialog title="添加权限" :visible.sync="dialogFormVisibleAddRole" width="800px" style="text-align: left">
          <div style="width: 90%;">
            <el-form :model="addRoleForm" label-width="300px">
              <el-form-item label="权限名">
                <el-select v-model="addRoleForm.roleId" placeholder="请选择">
                  <el-option
                      v-for="item in options"
                      :key="item.id"
                      :label="item.roleName"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div slot="footer" class="dialog-footer" style="text-align: center">
            <el-button @click="dialogFormVisibleAddRole = false">取 消</el-button>
            <el-button type="primary" @click="submitAddRoleForm()">确 定</el-button>
          </div>
        </el-dialog>

        <!-- 以下是修改用户的弹出表单Dialog -->
        <el-dialog title="修改用户" :visible.sync="dialogFormVisible" width="800px" style="text-align: left">
          <div style="width: 90%;">
            <el-form :model="editForm" label-width="140px">
              <el-form-item label="姓名" >
                <el-input v-model="editForm.username" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="昵称">
                <el-input v-model="editForm.nickname" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="手机号">
                <el-input v-model="editForm.phone" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="部门">
                <el-input v-model="editForm.department" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="岗位">
                <el-input v-model="editForm.post" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="员工类型">
                <el-input v-model="editForm.employeeType" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="个人简历">
                <el-input v-model="editForm.profile"  autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div slot="footer" class="dialog-footer" style="text-align: center">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitEditForm()">确 定</el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [],
                dialogFormVisible: false,
                dialogFormVisibleAddRole: false,
                selectForm:{
                  username: '',
                  department: '',
                  post: '',
                  employeeType: '',
                },
                addRoleForm: {
                    userId: 0,
                    roleId: 0
                },
                editForm: {},
                total: 0,
                currentPage: 1,
                pageSizes: [5,10,15,20],
                pageSize: 10,
                isSelect: false,
                type: [],
                options: []
            }
        },
        methods: {
            addAuthFormDialog(user){
              this.dialogFormVisibleAddRole = true;
              this.addRoleForm.userId = user.id;
              this.addRoleForm.roleId = '';
            },
            openDeleteRoleConfirm(role) {
              let message = '此操作将永久删除【' + role.roleName + '】权限，是否继续？';
              this.$confirm(message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.handleDeleteRole(role);
              }).catch(() => {
              });
            },
            handleDeleteRole(role) {
              let url = 'http://localhost:8080/user/' + role.id + '/deleteRole';
              this.axios.get(url).then((response) => {
                let jsonResult = response.data;
                if (jsonResult.state == 20000) {
                  this.$message({
                    message: '删除【' + role.roleName + '】权限成功！',
                    type: 'success'
                  });
                  this.loaduserList();
                } else if (jsonResult.state == 40400) {
                  this.$alert(jsonResult.message, '操作失败', {
                    confirmButtonText: '确定',
                    callback: action => {
                      this.loaduserList();
                    }
                  });
                } else {
                  this.$alert(jsonResult.message, '操作失败', {
                    confirmButtonText: '确定',
                    callback: action => {}
                  });
                }
              });
            },
            /*跳转员工新增页面方法*/
            regNewUser(){
                this.$router.replace('/user/reg')
            },
            showEditFormDialog(user) {
                // this.editForm = user;
                // this.dialogFormVisible = true;

                let url = 'http://localhost:8080/user/' + user.id;

                this.axios.get(url).then((response) => {
                    let jsonResult = response.data;
                    if (jsonResult.state == 20000) {
                        this.editForm = jsonResult.data;
                        this.dialogFormVisible = true;
                    } else if (jsonResult.state == 40400) {
                        this.$alert(jsonResult.message, '操作失败', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.loaduserList();
                            }
                        });
                    } else {
                        this.$alert(jsonResult.message, '操作失败', {
                            confirmButtonText: '确定',
                            callback: action => {}
                        });
                    }
                });
            },
            submitEditForm() {
                let url = 'http://localhost:8080/user/' + this.editForm.id + '/update';

                let formData = this.qs.stringify(this.editForm);

                this.axios.post(url, formData).then((response) => {
                    let jsonResult = response.data;
                    if (jsonResult.state == 20000) {
                        this.$message({
                            message: '修改用户成功！',
                            type: 'success'
                        });
                        this.dialogFormVisible = false;
                        this.loaduserList();
                    } else if (jsonResult.state == 40400) {
                        this.$alert(jsonResult.message, '操作失败', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.dialogFormVisible = false;
                                this.loaduserList();
                            }
                        });
                    } else if (jsonResult.state == 40900) {
                        this.$message.error(jsonResult.message);
                    } else {
                        this.$alert(jsonResult.message, '操作失败', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.dialogFormVisible = false;
                            }
                        });
                    }
                });
            },
            openDeleteConfirm(user) {
                let message = '此操作将永久删除【' + user.username + '】用户，是否继续？';
                this.$confirm(message, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.handleDelete(user);
                }).catch(() => {
                });
            },
            onReset(user){
              let message = '用户【' + user.username + '】的密码将重置为123456，是否继续？';
              this.$confirm(message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                  this.resetPassword(user);
              }).catch(() => {
              });
            },
            resetPassword(user){
              let url = 'http://localhost:8080/user/' + user.id + '/resetPassword';
              this.axios.get(url).then((response) => {
                let jsonResult = response.data;
                if (jsonResult.state == 20000) {
                  this.$message({
                    message: '用户【' + user.username + '】密码重置成功！',
                    type: 'success'
                  });
                }else {
                  this.$alert(jsonResult.message, '操作失败', {
                    confirmButtonText: '确定',
                    callback: action => {}
                  });
                }
              });
            },
            handleDelete(user) {
                let url = 'http://localhost:8080/user/' + user.id + '/delete';

                this.axios.post(url).then((response) => {
                    let jsonResult = response.data;
                    if (jsonResult.state == 20000) {
                        this.$message({
                            message: '删除【' + user.username + '】用户成功！',
                            type: 'success'
                        });
                        this.loaduserList();
                    } else if (jsonResult.state == 40400) {
                        this.$alert(jsonResult.message, '操作失败', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.loaduserList();
                            }
                        });
                    } else {
                        this.$alert(jsonResult.message, '操作失败', {
                            confirmButtonText: '确定',
                            callback: action => {}
                        });
                    }
                });
            },
            loaduserList() {
                let url = 'http://localhost:8080/user?page=1&pageSize='+this.pageSize;
                this.axios.get(url).then((response) => {
                    let jsonResult = response.data;
                    if (jsonResult.state == 20000) {
                        let data = jsonResult.data;
                        this.tableData = data.list;
                        this.currentPage = data.page;
                        this.total = data.total;
                    }else {
                      this.$alert(jsonResult.message, '操作失败', {
                        confirmButtonText: '确定',
                        callback: action => {}
                      });
                    }
                });
            },
            handleSizeChange(val) {
              this.pageSize = val;
              if(this.isSelect){
                this.onSelectClick(this.currentPage,val);
              }else{
                this.pageSelect(this.currentPage,val);
              }
            },
            handleCurrentChange(val) {
              if(this.isSelect){
                this.onSelectCzlick(val,this.pageSize);
              }else{
                this.pageSelect(val,this.pageSize);
              }
            },
            pageSelect(page,pageSize){
              let url = 'http://localhost:8080/user?page='+page+'&pageSize='+pageSize;
              this.axios.get(url).then((response)=>{
                let jsonResult = response.data;
                if (jsonResult.state == 20000) {
                  let data = jsonResult.data;
                  this.tableData = data.list;
                  this.currentPage = data.page;
                  this.total = data.total;
                }else {
                  this.$alert(jsonResult.message, '操作失败', {
                    confirmButtonText: '确定',
                    callback: action => {}
                  });
                }
              })
            },
            onSelectClick(page,pageSize){
              this.isSelect = true;
              let url = 'http://localhost:8080/user/selectByCondition'
              let data = this.qs.stringify(this.selectForm);
              data = data+'&page='+page+'&pageSize='+pageSize;
              this.axios.post(url,data).then((response)=>{
                let jsonResult = response.data;
                if (jsonResult.state == 20000) {
                  let data = jsonResult.data;
                  this.tableData = data.list;
                  this.currentPage = data.page;
                  this.total = data.total;
                }else {
                  this.$alert(jsonResult.message, '操作失败', {
                    confirmButtonText: '确定',
                    callback: action => {}
                  });
                }
              })
            },
            onResetSelect(){
              this.selectForm.username='';
              this.selectForm.department='';
              this.selectForm.post='';
              this.selectForm.employeeType='';
              this.isSelect = false;
              this.loaduserList();
            },
            selectRole(){
              let url = 'http://localhost:8080/user/selectRole';

              this.axios.get(url).then((response) => {
                let jsonResult = response.data;
                if (jsonResult.state == 20000) {
                  this.options = jsonResult.data;
                }else {
                  this.$alert(jsonResult.message, '操作失败', {
                    confirmButtonText: '确定',
                    callback: action => {}
                  });
                }
              });
            },
          submitAddRoleForm(formName){
            let url = 'http://localhost:8080/user/' + this.addRoleForm.userId+'/addRole';
            let formData = this.qs.stringify(this.addRoleForm);

            this.axios.post(url, formData).then((response) => {
              let jsonResult = response.data;
              if (jsonResult.state == 20000) {
                this.$message({
                  message: '添加角色成功！',
                  type: 'success'
                });
                this.addRoleForm.roleId = 0;
                this.dialogFormVisibleAddRole = false;
                this.loaduserList();
              } else {
                this.$alert(jsonResult.message, '操作失败', {
                  confirmButtonText: '确定',
                  callback: action => {}
                });
              }
            });
          },
        },
        mounted() {
            this.loaduserList();
            this.selectRole();
        }
    }
</script>

